<template>
  <div class="article-lists">
    <el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
        <el-form-item label="商品名称">
          <el-input
              class="w-[280px]"
              v-model="queryParams.goodsName"
              clearable
              @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select class="!w-[280px]" v-model="queryParams.onOffStatus">
            <el-option label="全部" value />
            <el-option label="已上架" value="2" />
            <el-option label="已下架" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-input
              class="w-[280px]"
              v-model="queryParams.cateName"
              clearable
              placeholder="请输入分类名称"
              @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="品牌">
          <el-input
              class="w-[280px]"
              v-model="queryParams.brandName"
              clearable
              placeholder="请输入品牌名称"
              @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="现金商品状态">
          <el-select class="!w-[280px]" v-model="queryParams.joinCashStatus">
            <el-option label="全部" value />
            <el-option label="已加入" value="1" />
            <el-option label="未加入" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="积分商品状态">
          <el-select class="!w-[280px]" v-model="queryParams.joinPointStatus">
            <el-option label="全部" value />
            <el-option label="已加入" value="1" />
            <el-option label="未加入" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <div>
        <el-button type="primary" class="mb-4" @click="handleOpen">
          <template #icon>
            <icon name="el-icon-Plus"/>
          </template>
          加入商品列表
        </el-button>
      </div>
      <el-table size="large" v-loading="pager.loading" :data="pager.lists" row-key="id"
                ref="tableRef"
                @selection-change="onSelectionChange">
        <el-table-column type="selection" reserve-selection/>
        <el-table-column label="商品ID" prop="id" min-width="80"/>
        <el-table-column
            show-overflow-tooltip
            label="产品名称"
            min-width="200"
            prop="goodsName"
        ></el-table-column>
        <el-table-column show-overflow-tooltip label="产品主图" min-width="100">
          <template #default="{ row }">
            <el-image
                style="width: 50px; height: 50px"
                :src="row.defaultImage"
                :fit="row.defaultImage"
            />
          </template>
        </el-table-column>
        <el-table-column label="分类" prop="cateName" min-width="100"></el-table-column>
        <el-table-column label="品牌" min-width="100" prop="brandName"></el-table-column>
        <el-table-column label="商品状态" min-width="100" key="1">
          <template #default="{ row }">
            <el-switch
                v-if="row.id != 1"
                :model-value="row.onOffStatus"
                :active-value="2"
                :inactive-value="1"
            />
          </template>
        </el-table-column>
        <el-table-column label="供货商结算价" min-width="100" prop="supplierPrice">
          <template #default="{ row }">
            {{ row.defaultSpec?.supplierPrice }}
          </template>
        </el-table-column>
        <el-table-column label="现金商品状态" min-width="100" key="joinCashStatus">
          <template #default="{ row }">
            <el-tag :type="row.joinCashStatus == 1 ? 'success' : 'danger'">{{
                row.joinCashStatus == 1 ? "已加入" : "未加入"
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="积分商品状态" min-width="100" key="joinPointStatus">
          <template #default="{ row }">
            <el-tag :type="row.joinPointStatus == 1 ? 'success' : 'danger'">{{
                row.joinPointStatus == 1 ? "已加入" : "未加入"
              }}</el-tag>
          </template>
        </el-table-column>
        <!--        <el-table-column label="平台结算价" min-width="100" prop="supplyChainPrice">-->
        <!--          <template #default="{ row }">-->
        <!--            {{ row.defaultSpec?.supplyChainPrice }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="利润" min-width="100" prop="profits">-->
        <!--          <template #default="{ row }">-->
        <!--            {{ row.defaultSpec?.profits }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="划线价" min-width="100" prop="marketPrice">
          <template #default="{ row }">
            {{ row.defaultSpec?.marketPrice }}
          </template>
        </el-table-column>
        <el-table-column label="采样量" min-width="80" prop="samplingNum"></el-table-column>
        <el-table-column label="打包数" min-width="100" prop="marketPrice">
          <template #default="{ row }">
            {{ row.defaultSpec?.packageNum }}
          </template>
        </el-table-column>
        <el-table-column label="快递起订量" min-width="100" prop="marketPrice">
          <template #default="{ row }">
            {{ row.defaultSpec?.moq }}
          </template>
        </el-table-column>
        <el-table-column label="物流起订量" min-width="100" prop="marketPrice">
          <template #default="{ row }">
            {{ row.defaultSpec?.wlMoq }}
          </template>
        </el-table-column>
        <el-table-column label="总库存" min-width="80" prop="totalStock"></el-table-column>
        <el-table-column label="销量" min-width="80" prop="salesVolume"></el-table-column>
        <el-table-column label="所属供货商" min-width="80" prop="supplierName">
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link>
              <router-link
                  :to="{
                                    path: '/goods/poolGoodsDetail',
                                    query: {
                                        id: row.id
                                    }
                                }"
              >
                查看详情
              </router-link>
            </el-button>
            <el-button type="primary" link @click="doEdit(row)"> 设置销量</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists"/>
      </div>
    </el-card>
    <edit-popup v-if="showEdit" ref="editRef" @success="getLists()" @close="showEdit = false"/>
    <select-popup v-if="showSelect" ref="selectRef" @success="handleSuccess" @close="showSelect = false"/>
  </div>
</template>
<script lang="ts" setup name="articleLists">
import {useDictOptions} from '@/hooks/useDictOptions'
import {usePaging} from '@/hooks/usePaging'
import {listSupplierGoodsPage} from '@/servers/goods/api/supplyChainshangpingonghuoshangshangpinguanli.ts'
import editPopup from '../../salesEditor/index.vue'
import selectPopup from '../../selectionEditor/index.vue'

import feedback from "@/utils/feedback";


const queryParams = reactive({
  goodsName: undefined,
  onOffStatus: '',
  cateName:'',
  brandName:'',
  joinCashStatus:'',
  joinPointStatus:'',
})

const tableRef = ref();
const multipleSelection = ref<any[]>([]);

// 修改价格
const showEdit = ref(false)
const editRef = ref<any>()
const doEdit = async (row: any) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open(row)
}

const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: listSupplierGoodsPage,
  params: queryParams
})

// const { optionsData } = useDictOptions<{
//     articleCate: any[]
// }>({
//     articleCate: {
//         api: articleCateAll
//     }
// })
const onSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
const showSelect = ref(false)
const selectRef = ref<any>()
const handleOpen = async () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请先选择商品");
    return;
  }
  showSelect.value = true
  await nextTick()
  selectRef.value?.open(multipleSelection.value.map((item) => item.id))
}
const handleSuccess = async () => {
  tableRef.value?.clearSelection();
  multipleSelection.value = [];
  getLists();
};

onActivated(() => {
  getLists()
})

getLists()
</script>
